<template>
	<view>
		<!-- 搜索 -->
		<view style="display: flex;padding: 20upx;background-color: #FFFFFF;justify-content: space-between;align-items: center;">
			<view class="search">
				<!-- <image src="../../static/icon/search.png" class="search-icon"></image> -->
				<uni-icon type="search" size="40" color="#999"></uni-icon>
				<input style="margin-left: 20upx;flex: 1;" maxlength="30" placeholder="请输入关键字" confirm-type="search" @input="onKeyInput"
				 @confirm="search" />
			</view>
			<image src="../../static/icon/menu.png" class="search-menu" @click="goCategory"></image>
		</view>
		<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :style="{height:banHeight}">
			<swiper-item v-for="(item, index) in banner" :key="index">
				<image class="banner-item-img" :src="item.imgUrl" :style="{height:banHeight}" @click="handleClickAd(item)" />
			</swiper-item>
		</swiper>

		<uni-grid :data="cateItems" column-num="4" style='background-color: #FFFFFF;'></uni-grid>

		<view class="container" v-if="hotGoodsList">
			<view class="title">热卖单品</view>
			<image v-if="ad[0]" :src='ad[0].imgUrl' style="margin-top: 20upx;width: 100%;height: 180upx;"></image>
			<scroll-view scroll-x style="height: 320upx;margin: 20upx;width: 710upx;overflow: hidden;">
				<view style="display: flex;">
					<view v-for="(item,index) in hotGoodsList" :key='index' style="width: 200upx;margin-right: 20upx;" @click='goDetail(item)'>
						<image :src="item.goodsImgUrl" style="width: 200upx;height: 200upx;"></image>
						<p class="productName">{{item.name}}</p>
						<p style="text-align: center;">¥{{item.price}}</p>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="container" v-if='topicList'>
			<view class="title">新品上市</view>
			<image v-if="ad[1]" :src='ad[1].imgUrl' @click="toAd" style="margin-top: 20upx;width: 100%;height: 180upx;"></image>
			<view style="display: flex;flex-wrap: wrap;padding: 20upx 10upx;">
				<view v-for="(item,index) in topicList" :key='index' style="width: 222upx;margin: 0 auto;" @click='goDetail(item)'>
					<image :src="item.goodsImgUrl" style="width: 222upx;height: 222upx;"></image>
					<p class="productName">{{item.name}}</p>
					<p style="text-align: center;">¥{{item.price}}</p>
				</view>
			</view>
		</view>
		<view class="container" v-if="categoryList">
			<view class="title">随便逛逛</view>
			<image v-if="ad[2]" :src='ad[2].imgUrl' style="margin-top: 20upx;width: 100%;height: 180upx;"></image>
			<view style="margin:20upx;display:flex;flex-wrap: wrap;">
				<view class="product" @click='goDetail(item)' v-for="(item,index) in categoryList" :key='index'>
					<image :src="item.goodsImgUrl" style="width: 330upx;height: 330upx;"></image>
					<view style="padding: 10upx 20upx;">
						<p class="productName">{{item.name}}</p>
						<p>¥{{item.price}}</p>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		get,
		post,
		showToast
	} from '../../js/common';

	export default {
		data() {
			return {
				banner: [],
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 1000,
				cateItems: [],
				hotGoodsList: [],
				topicList: [],
				categoryList: [],
				ad: [],
				inputValue: ''
			}
		},
		computed: {
			banHeight() {
				return uni.upx2px(750 / 2.14) + 'px';
			}
		},
		mounted() {
			this.getIndex()
		},
		methods: {
			handleClickAd(item) {
				if (item.adType === 1) {
					if (item.val !== '') {
						window.open(item.val)
					}
				} else if (item.adType === 2) {
					uni.navigateTo({
						url: '/pages/commodity/index?id=' + item.val
					})
				}
			},
			getIndex() {
				get('mobileapi/anon/home/index')
					.then(res => {
						this.banner = res.index.slideList
						this.cateItems = res.index.mobileIndexCate
						this.hotGoodsList = res.index.hotGoodsList
						this.topicList = res.index.recommendGoodsList
						this.categoryList = res.index.randomGoodsList
						if (res.index.mobileAd) {
							this.ad = res.index.mobileAd
						}
						for (let i = 0; i < this.cateItems.length; i++) {
							this.cateItems[i].image = this.cateItems[i].icon_url
							this.cateItems[i].text = this.cateItems[i].name
						}
					})
			},
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/commodity/index?id=' + item.id
				})
			},
			toAd() {
				if (this.ad.adType === 1) {
					uni.navigateTo({
						url: this.ad.val
					})
				} else {
					if (this.ad.adType === 2) {
						uni.navigateTo({
							url: '/pages/commodity/index?id=' + this.ad.val
						})
					}
				}
			},
			onKeyInput(event) {
				this.inputValue = event.target.value
			},
			search() {
				uni.navigateTo({
					url: '../search/index?key=' + this.inputValue
				})
			},
			goCategory() {
				uni.navigateTo({
					url: '../category/index'
				})
			}
		},
		onLoad() {
			this.accesstoken = uni.getStorageSync('token')
			this.userId = uni.getStorageSync('id')
		}
	}
</script>

<style>
	.banner-item-img {
		width: 100%;
	}

	.search {
		background: #F2F2F2;
		display: flex;
		align-items: center;
		padding: 16upx 24upx;
		margin-right: 20upx;
		flex: 1;
	}

	.search input {
		font-size: 30upx;
		line-height: 44upx;
	}

	.search-icon {
		margin-right: 26upx;
		width: 30upx;
		height: 30upx;
	}

	.search-menu {
		width: 40upx;
		height: 40upx;
	}

	.container {
		width: 100%;
		background-color: #fff;
		padding: 10upx 0;
		margin-top: 20upx;
		font-size: 28upx;
	}

	.title {
		border-left: 8upx #D7000F solid;
		padding-left: 20upx;
		font-size: 30upx;
	}

	.productName {
		text-align: center;
		height: 80upx;
		line-height: 40upx;
		overflow: hidden;
		/* white-space: nowrap; */
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.category {
		width: 300upx;
		text-align: center;
		border: 1px solid #999;
		line-height: 50upx;
		margin: 10upx auto;
	}

	.product {
		width: 330upx;
		border: 1px solid #E6E6E6;
		margin: 12upx;
		text-align: center;
		line-height: 40upx;
	}
</style>
